<template>
    <el-form
        label-width="0"
        :model="formLabelAlign"
        :rules="rules"
        ref="ruleForm"
    >
        <el-form-item prop="title">
            <el-input
                v-if="parent_id == null"
                style="width: 48%;"
                v-model="formLabelAlign.icon"
                placeholder="请输入Icon"
            ></el-input>
            <el-input
                :style="titleStyle"
                v-model="formLabelAlign.title"
                placeholder="请输入标题(必须)"
            ></el-input>
        </el-form-item>

        <el-form-item prop="url">
            <el-input
                style="width: calc(100% - 190px);"
                v-model="formLabelAlign.url"
                placeholder="请输入链接(必须)"
            > </el-input>
            <el-input-number
                    style="width: 180px;margin-left: 10px;"
                    v-model="formLabelAlign.sort"
                    :min="0"
            ></el-input-number>
        </el-form-item>

        <el-form-item prop="permission">
            <el-transfer
                    style="display: block"
                filterable
                filter-placeholder="请输入搜索权限"
                :titles="['权限列表', '组权限']"
                v-model="formLabelAlign.permission"
                :data="permissionList"
            ></el-transfer>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submit">立即提交</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import { permissionList } from '@/api/permission'
    import { menuAdd,menuDetail,menuEdit } from '@/api/menu'
    import { MenuRules } from '@forms/menu'

    export default {
        name: "navMenuEdit",
        data() {
            return {
                rules: MenuRules,
                permissionList:[],
                menu_id:'',
                parent_id:'',
                formLabelAlign:{
                    title:'',
                    icon:'',
                    name:'',
                    url:'',
                    sort:0,
                    permission:[],
                },
            }
        },
        computed: {
            titleStyle() {
                let allWidth = { width:'100%' }
                let haleWidth = { width:'50%','marginLeft':'1%' }

                return this.parent_id == null?haleWidth:allWidth
            }
        },
        methods: {
            openMask(menu_id,parent_id){
                this.menu_id = menu_id
                this.parent_id = parent_id
                this.formLabelAlign = {
                    title:'',
                    name:'',
                    icon:'',
                    url:'',
                    sort:0,
                    permission:[],
                    parent_id:parent_id,
                }

                if(menu_id) this.getDetail()
                if(this.permissionList.length===0) this.getpermissionList()
            },
            getDetail(){
                menuDetail(this.menu_id)
                    .then(res=>{
                        if(Number(res.code)===0){
                            let data = res.data
                            let permission = []
                            data.permission.forEach(v=>{
                                if(v == '')return false;
                                permission.push(Number(v))
                            })
                            Object.assign(this.formLabelAlign,{
                                title:data.title,
                                name:data.name,
                                url:data.url,
                                icon:data.icon,
                                sort:data.sort,
                                permission:permission,
                                parent_id:data.parent_id,
                            })
                        }else{
                            this.$Alert({ message:res.msg, type:'error' })
                        }
                    })
            },
            getpermissionList() {
                permissionList()
                    .then(res=>{
                        if (Number(res.code) === 0) {
                            let permissionList = []
                            res.data.forEach(item=>{
                                permissionList.push({
                                    label: item.name.split('Can ')[1],
                                    key: item.id,
                                })
                            })
                            this.permissionList = permissionList
                        } else {
                            this.$Alert({message: res.msg, type: 'error'})
                        }
                    })
            },
            submit() {
                this.$refs.ruleForm.validate(valid => {
                    if (!valid) return false
                    let formLabelAlign = this.formLabelAlign
                    let permission = formLabelAlign.permission.length>0?formLabelAlign.permission.map(v=>String(v)):[]

                    let params = {
                        title:formLabelAlign.title,
                        url:formLabelAlign.url,
                        icon:formLabelAlign.icon,
                        sort:formLabelAlign.sort,
                        name:formLabelAlign.name,
                        permission:permission,
                        parent_id:formLabelAlign.parent_id
                    }

                    if(this.menu_id){
                        menuEdit(this.menu_id,params)
                            .then(res=>this.resultHandle(res))
                    }else{
                        menuAdd(params)
                            .then(res=>this.resultHandle(res))
                    }
                })
            },
            resultHandle(res){
                if(Number(res.code)===0){
                    this.$Alert({
                        message:res.msg,
                        type:'success',
                        callback:()=> this.$emit('success')
                    })
                }else{
                    this.$Alert({ message:res.msg, type:'error' })
                }
            }
        },
    }
</script>

<style scoped lang="less">

</style>